<template>
  <div class="material-content">
    <!-- 左侧图片容器 -->
    <div class="left-image">
      <img src="/src/static/w.png" alt="设备示意图" class="material-img">
    </div>
    <!-- 右侧卡片容器（改为flex容器，支持换行） -->
    <div class="right-card">
      <a-card class="material-card">
        <div class="card-header">物料台账管理</div>
        <div class="card-content">
          建立物料统一台账，记录编码、名称、规格、供应商、安全库存等信息，支持新增、编辑与实时更新，确保物料基础数据准确，为后续管理提供依据。
        </div>
      </a-card>
      <a-card class="material-card">
        <div class="card-header">物料入库管理</div>
        <div class="card-content">
          物料到库后，对照采购订单核对数量与规格，按标准验收质量，合格后登记入库并更新库存，不合格则反馈采购部门处理，保障入库物料合规。
        </div>
      </a-card>
      <a-card class="material-card">
        <div class="card-header">物料存储管理</div>
        <div class="card-content">
          划分物料存储区域，按属性（如温湿度要求、重量）分类存放，标注物料位置与状态，定期检查存储环境，防止物料损坏或变质，提升存储安全性。
        </div>
      </a-card>
      <a-card class="material-card">
        <div class="card-header">物料领用管理</div>
        <div class="card-content">
          车间或部门凭领用单申请物料，审核通过后按单发放，记录领用数量与用途，实时扣减库存，避免超额领用，确保物料合理分配。
        </div>
      </a-card>
      <a-card class="material-card">
        <div class="card-header">物料盘点管理</div>
        <div class="card-content">
          定期开展物料盘点，核对账面与实际库存数量，生成差异报告并分析原因（如损耗、记录错误），及时调整库存数据，保障库存准确性。
        </div>
      </a-card>
      <a-card class="material-card">
        <div class="card-header">物料统计查询</div>
        <div class="card-content">
          多维度统计物料库存、入库量、领用量、损耗率等数据，以图表可视化呈现，支持自定义查询，助力管理者掌握物料流转情况，优化物料管理。
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
/* 最外层容器：左右布局 */
.material-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  flex-wrap: wrap; /* 整体在小屏幕换行 */
  min-width: 600px;
  padding: 20px;
  gap: 20px;
}

/* 左侧图片容器：固定宽度 */
.left-image {
  width: 300px;
  flex-shrink: 0; /* 不收缩，避免挤压 */
}

.material-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}

/* 右侧卡片容器：改为flex容器，支持内部卡片换行 */
.right-card {
  display: flex;
  flex: 1; /* 占据剩余空间 */
  min-width: 300px; /* 最小宽度，避免过窄 */
  flex-wrap: wrap; /* 核心：卡片超出宽度时自动换行 */
  gap: 16px; /* 卡片之间的间距（水平+垂直） */
  padding: 10px 0; /* 上下内边距，优化边缘卡片间距 */
}

/* 单张卡片样式：限制最大宽度，触发换行 */
.material-card {
  flex: 1; /* 自动填充行内空间 */
  min-width: 300px; /* 最小宽度，确保内容不拥挤 */
  max-width: 350px; /* 最大宽度，超过则换行 */
  box-sizing: border-box; /* 避免padding影响宽度计算 */
}

/* 卡片标题样式 */
.card-header {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

/* 卡片内容样式 */
.card-content {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
  padding: 8px 0;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  .material-content {
    min-width: 300px;
    flex-direction: column; /* 左右布局改为上下布局 */
    align-items: center;
  }

  .left-image {
    width: 250px;
  }

  .right-card {
    width: 90%; /* 占满屏幕宽度 */
  }

  .material-card {
    max-width: 100%; /* 小屏幕卡片占满宽度，不换行 */
  }
}
</style>